import React, { Component } from "react";
import { Toast, Checkbox, Modal } from "antd-mobile";
import "./xhdEarlyRepayment.scss";
import { connect } from "react-redux";
import { InterfaceG } from "../../../config/Config";
import yhTools from "../../../tools/yh";
import MainLayout from "../../../component/mainLayout/mainLayout";
import iconArrow from "../../../images/xhdArrow.png";
import iconClose from "../../../images/icon-open-account-close.png";
const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;
class XhdEarlyRepayment extends Component {
	constructor(props) {
		super(props);
		this.state = {
			currentDate: "",
			totalAmt: "",
			loanInfos: [],
			showModal: false,
			allSelected: false,
			allMonery: 0,
			btnText: "立即还款",
			canPay: false
		};
	}

	componentDidMount() {
		this.xhdRepayLncinoInfo();
	}

	xhdRepayLncinoInfo() {
		let objs = {
			url: InterfaceG.xhdRepayLncinoInfo,
			params: {
				lnid: this.props.getAppPlatformsDatas.lnid,
				applyNo: this.props.getAppPlatformsDatas.applyNo
			},
			_alertShow: false
		};
		let _that = this;
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				const data = res.data;
				const currentDate = data.currentDate;
				const totalAmt = data.totalAmt;
				let loanInfos = data.loanInfos;
				loanInfos.forEach(item => {
					item.isSelected = false;
				});
				_that.setState({
					currentDate,
					totalAmt,
					loanInfos
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	btnFn() {}

	onChecked(cino, canSettlement, e) {
		console.log(e);
		if (!canSettlement) {
			Toast.info("该借款暂时不能提前结清");
			return false;
		}
		let { loanInfos } = this.state;
		let total = 0;
		const isChecked = e.target.checked;
		loanInfos.forEach(item => {
			if (item.cino == cino) {
				item.isSelected = isChecked;
			}
		});
		loanInfos.forEach(v => {
			if (v.isSelected) {
				total += Number(v.remmainTotal);
			}
		});

		const isAllChecked = loanInfos.every(item => {
			if (item.isSelected) {
				return true;
			}
		});
		const canPay = loanInfos.some(item => {
			if (item.isSelected) {
				return true;
			}
		});
		this.setState({
			loanInfos,
			allMonery: total.toFixed(2),
			allSelected: isAllChecked,
			canPay
		});
	}

	//全选按钮操作
	allChecked(e) {
		let total = 0;
		let { loanInfos } = this.state;
		loanInfos.forEach(item => {
			if (item.canSettlement) {
				item.isSelected = e.target.checked;
			} else {
				item.isSelected = false;
			}
		});
		loanInfos.forEach(v => {
			if (v.isSelected) {
				total += Number(v.remmainTotal);
			}
		});

		const canPay = loanInfos.some(item => {
			if (item.isSelected) {
				return true;
			}
		});

		this.setState({
			allMonery: total.toFixed(2),
			loanInfos,
			allSelected: e.target.checked,
			canPay
		});
	}

	closeModal() {
		this.setState({
			showModal: false
		});
	}

	showPlayModal(item) {
		this.setState({
			showModal: true
		});
		this.setState({
			curInfo: item
		});
		this.lncinoRemainPlan(item.cino);
	}

	lncinoRemainPlan(cino) {
		let objs = {
			url: InterfaceG.lncinoRemainPlan,
			params: {
				cino
			},
			_alertShow: false
		};
		let _that = this;
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				_that.setState({
					remainPLan: res.data.remainPLan
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	earlyerPay() {
		if (!this.state.canPay) {
			return false;
		}
		let { loanInfos } = this.state;
		let loanArray = [];
		loanInfos.forEach(item => {
			if (item.isSelected) {
				loanArray.push(item.cino);
			}
		});
		this.props.history.push({
			pathname: `/repaymentMoney/${JSON.stringify({
				repayBill: "1",
				fromType: "XHD",
				loanArray,
				backPath: "xhdEarlyPay"
			})}`
			// pathname: '/repaymentMoney',
			// state:{repayBill:'1',fromType:'XHD',loanArray,backPath:'xhdEarlyPay'}
		});
	}

	gotoxhdRecordList() {
		this.props.history.push("/xhdRecordList");
	}

	render() {
		const {
			allMonery,
			allSelected,
			totalAmt,
			loanInfos,
			canPay,
			remainPLan = [],
			curInfo = {}
		} = this.state;
		let _pageParams = {
			header: {
				title: "结清还款",
				goBackPath: "/xhdPayBackHome",
				rightButt: "借还记录",
				rightButtCallBack: this.gotoxhdRecordList.bind(this)
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};

		return (
			<MainLayout pageParams={_pageParams}>
				<div className="xhd-earlyer-pay">
					<div className="payBack-detail-heard">
						<h3>剩余未还金额（元）</h3>
						<h2>{totalAmt}</h2>
						<p>
							{" "}
							<span>共{loanInfos.length}笔</span>{" "}
						</p>
					</div>
					<div className="earlyer-pay-box">
						{loanInfos.map((item, index) => {
							return (
								<div className="earlyer-pay-item" key={index}>
									<div className="check-item">
										<CheckboxItem
											checked={item.isSelected}
											onChange={this.onChecked.bind(
												this,
												item.cino,
												item.canSettlement
											)}
										></CheckboxItem>
									</div>
									<div className="earlyer-content">
										<h3>¥{item.remmainTotal}</h3>
										<h5>还剩{item.remainTerms}期可还完</h5>
										<p>
											{item.loanDate} 借款{item.loanAmt}元
										</p>
									</div>
									<div
										className="earlyer-right"
										onClick={this.showPlayModal.bind(this, item)}
									>
										{/* <div className="earlyer-right-data">
                                                <h6>已还</h6>
                                                <span>10%</span>
                                            </div> */}
										<div className="earlyer-right-arr">
											<img src={iconArrow} />
										</div>
									</div>
								</div>
							);
						})}

						<div className="earlyer-flooer">
							<div className="check-item all-check">
								<AgreeItem
									checked={allSelected}
									onChange={this.allChecked.bind(this)}
								>
									全选
								</AgreeItem>
							</div>
							<p>
								合计<span>{allMonery}</span>元
							</p>
							<button
								className={!canPay ? "btn disabled" : "btn"}
								onClick={this.earlyerPay.bind(this)}
							>
								立即还款
							</button>
						</div>
					</div>
					<Modal
						className="earlyer-pay-modal"
						popup
						visible={this.state.showModal}
						// onClose={this.onClose('modal2')}
						animationType="slide-up"
					>
						<div className="payBack-play-box">
							<div className="payBack-play-heard">
								<h2>剩余应还计划</h2>
								<img onClick={this.closeModal.bind(this)} src={iconClose} />
								{/* <i onClick={this.closeModal.bind(this)}>X</i> */}
							</div>
							<div className="earlyer-modal-title">
								<p>
									{curInfo.loanDate} 借款 {curInfo.loanAmt}元
								</p>
								<p>
									剩余应还金额 <span>{curInfo.remmainTotal} 元</span>
								</p>
							</div>
							<div className="earlyer-modal-line"></div>
							<div className="earlyer-pay">
								<div className="earlyer-pay-l">还款时间</div>
								<div className="earlyer-pay-r">应还金额</div>
							</div>
							{remainPLan.map((item, index) => {
								return (
									<div key={index} className="earlyer-pay">
										<div className="payBack-item-l">
											{item.rtnDate}（第{item.term}期）
										</div>
										<div className="payBack-item-r">¥{item.rtnAmt}</div>
									</div>
								);
							})}
						</div>
					</Modal>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const XhdEarlyRepaymentPage = connect(
	mapStateToProps,
	mapDispatchToProps
)(XhdEarlyRepayment);
export default XhdEarlyRepaymentPage;
